<template>
  <a-layout-content>

    <!-- 第三：组件引用-->
    <a-breadcrumb>
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">工单管理</a></a-breadcrumb-item>
    </a-breadcrumb>
    <a-col :span="23" style="margin-top: 20px">
      <h2>工单管理</h2>
    </a-col>


    <a-row>
      <a-col :span="23">
        <Button style="float: right"
                :filterData.sync="filterData"
                @filterMethod="filterMethod"
        ></Button>
      </a-col>
    </a-row>


    <a-row style="margin-top: 20px;margin-bottom: 20px;">
      <a-button type="primary" @click="showModal" style="float: left">
        新建
      </a-button>
      <a-col :span="23">
        <Addusers
          :visible.sync="visible"
          :editData="editData"
          @requestAdd="requestAdd"
        ></Addusers>
      </a-col>
    </a-row>


    <a-row>
      <TableList
        :tableData="tableData"
        :visible.sync="visible"
        :editData.sync="editData"
        @requestDelete="requestDelete"
      ></TableList>
    </a-row>

  </a-layout-content>



</template>

<script>
import { getWorkOrderList } from '@/http/api.js'

import Button from '@/components/WorkList/Button'
import Addusers from '@/components/WorkList/Addusers'
import TableList from '@/components/WorkList/TableList'

// Pagination分页中假数据
const data = [
  {
    "id": 11,
    "is_superuser": false,
    "username": "tom110",
    "mobile": "18538752512",
    "email": "",
  },
  {
    "id": 12,
    "is_superuser": false,
    "username": "tom110",
    "mobile": "18538752512",
    "email": "",
  },
];


export default {
  name: "index-usermanage",
  data(){
    return {
      // 父组件中过滤绑定数据，传递到子组件中
      filterData:{
        page: 1,         // Pagination分页组件中默认显示第一页
        page_size: 5,    // Pagination组件中默认每页显示10条数据
        username: '',    // Search组件中使用username搜索用户
      },
      // 2.编辑或修改时显示的弹出框
      visible: false,   // 添加和是否显示弹出框
      editData: {       // 添加和修改用户时，弹出框中进行双向绑定的数据
        username: '',
        password: '123456',
        email:'',
        mobile:''
      },

      // 1.table框中绑定数据（后端表中数据列表）
      tableData: data,  // 初始化页面中，表格中显示的所有用户信息

      // 3.过滤和分页中的绑定数据
      totalCount: 0,     // 在获取用户数据时把数据总量替换到这里，可以进行分页
    }
  },
  // 第二：注册组件
  components:{

    Button,
    Addusers,
    TableList,
  },
  created(){
    this.initList()
  },
  methods:{
    showModal() {
      this.editData = {
        username: 'tom',
        password: '123456',
        email:'tom@qq.com',
        mobile:'18538752555'
      }
      this.visible = true;
    },

    // 在搜索子组件中点击“搜索”触发当前方法
    filterMethod(){
      this.initList()
    },
    // 一.初始化时显示所有用户
    initList(){
      getWorkOrderList(this.filterData).then(resp => {
        console.log(resp.results, 'aaaaaaaaaaaaaaaaaa')
        this.tableData = resp.results
        this.totalCount = resp.count
      }).catch(err=>{
        console.log(err)
        alert('获取用户失败')
      })
    },

    // 二.修改或添加用户时显示弹出框
    // 2.2 添加获取修改用户时进行后端请求
    requestAdd(){
      const userId = this.editData.id
      if(userId){
        console.log(this.editData,'修改数据')
        updateUser(this.editData).then(resp => {
          this.initUserList()
        }).catch(err=>{
          console.log(err)
          alert('更新用户失败')
        })
      }else {
        addUser(this.editData).then(resp => {
          this.initUserList()
        }).catch(err=>{
          console.log(err)
          alert('创建用户失败')
        })
      }
    },

    // 三.删除指定用户
    requestDelete(){
      deleteUser(this.editData).then(resp => {
        this.initUserList()
      }).catch(err=>{
        console.log(err)
        alert('更新用户失败')
      })
    },


  },

  // 2.1 显示弹出框
  showModal() {
    this.editData = {
      username: 'tom',
      password: '123456',
      email:'tom@qq.com',
      mobile:'18538752555'
    }
    this.visible = true;
  },

  // 2.2 添加获取修改用户时进行后端请求
  requestAdd(){
    const id = this.editData.id
    if(id){
      console.log(this.editData,'修改数据')
      updateUser(this.editData).then(resp => {
        this.initList()
      }).catch(err=>{
        console.log(err)
        alert('更新用户失败')
      })
    }else {
      addUser(this.editData).then(resp => {
        this.initList()
      }).catch(err=>{
        console.log(err)
        alert('创建用户失败')
      })
    }
  },
}
</script>

<style scoped>

</style>
